<template>
    <div class="content">
        
        <el-image  class="img-view" :src="img" fit="cover" 
            :style="{width: `${width}px`, height: `${height}px`, '--xdeg': `${xdeg}deg`, '--ydeg': `${ydeg}deg`}"
            @mouseenter="onMouseenter" @mousemove="onMousemove" @mouseleave="onMouseleave"></el-image>

    </div>
</template>

<script setup>
    import { ref, onMounted } from 'vue'
    
    const img = new URL('../assets/images/test2.jpg', import.meta.url).href

    const width = ref(200)
    const height = ref(300)
    const xdeg = ref(0)
    const ydeg = ref(0)

    /**
     * 鼠标划入事件
     */
    const onMouseenter = (e) => {
        
    }

    /**
     * 鼠标划出事件
     */
    const onMouseleave = (e) => {
        ydeg.value = 0
        xdeg.value = 0
    }

    const xMax = [-10, 10]
    const yMax = [-10, 10]
    /**
     * 鼠标滑动事件
     */
    const onMousemove = (e) => {
        ydeg.value = -(e.offsetX * (xMax[1] - xMax[0]) / width.value + xMax[0])
        xdeg.value = e.offsetY * (yMax[1] - yMax[0]) / height.value + yMax[0]
    }

</script>

<style scoped>
.content {
    width: 100%;
    height: 1200px;
    padding: 100px 0 0 200px;
    background-color: #000000;
}

.img-view {
    border-radius: 6px;
    box-shadow: 1px 1px 7px 5px #FFFFFF44;
    cursor: pointer;
    transition: all .2s;
    transform: perspective(500px) rotateX(var(--xdeg, 0deg)) rotateY(var(--ydeg, 0deg));
}

.img-view:hover {
    transition: none;
}
</style>